<template>
  <div class="checkup-report-container">
    <el-card title="体检报告">
      <div v-if="editable" class="add-report-btn">
        <el-button type="primary" @click="showAddDialog = true">添加体检报告</el-button>
      </div>

      <el-table :data="data.reports || []" border style="width: 100%">
        <el-table-column prop="checkupDate" label="体检日期" width="150"></el-table-column>
        <el-table-column prop="type" label="体检类型" width="120"></el-table-column>
        <el-table-column prop="institution" label="体检机构" width="180"></el-table-column>
        <el-table-column prop="summary" label="体检总结"></el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" width="120"></el-table-column>
        <el-table-column label="操作" width="180" v-if="editable">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加/编辑对话框 -->
      <el-dialog v-model="showAddDialog" title="{{ dialogTitle }}" width="600px">
        <el-form :model="formData" label-width="120px">
          <el-form-item label="体检日期" required>
            <el-date-picker
              v-model="formData.checkupDate"
              type="date"
              placeholder="选择体检日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="体检类型" required>
            <el-select v-model="formData.type" placeholder="请选择体检类型">
              <el-option label="常规体检" value="routine"></el-option>
              <el-option label="专项体检" value="specialized"></el-option>
              <el-option label="入职体检" value="employment"></el-option>
              <el-option label="年度体检" value="annual"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="体检机构" required>
            <el-input v-model="formData.institution" placeholder="请输入体检机构"></el-input>
          </el-form-item>
          <el-form-item label="医生姓名">
            <el-input v-model="formData.doctorName" placeholder="请输入医生姓名"></el-input>
          </el-form-item>
          <el-form-item label="体检总结">
            <el-input v-model="formData.summary" type="textarea" rows="4" placeholder="请输入体检总结"></el-input>
          </el-form-item>
          <el-form-item label="报告附件">
            <el-upload
              action="#"
              :auto-upload="false"
              :on-change="handleFileChange"
              :file-list="fileList"
            >
              <el-button type="primary">上传报告</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleDialogSave">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElSelect, ElOption, ElUpload } from 'element-plus';
import { ElMessage } from 'element-plus';

// 定义props
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({ reports: [] })
  },
  editable: {
    type: Boolean,
    default: false
  }
});

// 定义emits
const emit = defineEmits(['update:data']);

// 状态变量
const showAddDialog = ref(false);
const dialogTitle = ref('添加体检报告');
const formData = ref({});
const currentEditingIndex = ref(-1);
const reports = ref([...props.data.reports || []]);
const fileList = ref([]);

// 监听props.data变化，更新本地数据
watch(() => props.data,
  (newData) => {
    reports.value = [...newData.reports || []];
  },
  { deep: true }
);

// 处理文件上传
const handleFileChange = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
  formData.value.attachment = uploadFile.raw;
};

// 处理编辑
const handleEdit = (row) => {
  currentEditingIndex.value = reports.value.indexOf(row);
  formData.value = { ...row };
  dialogTitle.value = '编辑体检报告';
  showAddDialog.value = true;
};

// 处理删除
const handleDelete = (row) => {
  const index = reports.value.indexOf(row);
  reports.value.splice(index, 1);
  emit('update:data', { ...props.data, reports: [...reports.value] });
  ElMessage.success('删除成功');
};

// 处理对话框保存
const handleDialogSave = () => {
  if (currentEditingIndex.value === -1) {
    // 添加新记录
    reports.value.push({ ...formData.value });
  } else {
    // 更新现有记录
    reports.value[currentEditingIndex.value] = { ...formData.value };
  }

  emit('update:data', { ...props.data, reports: [...reports.value] });
  showAddDialog.value = false;
  formData.value = {};
  fileList.value = [];
  currentEditingIndex.value = -1;
  dialogTitle.value = '添加体检报告';
  ElMessage.success('保存成功');
};
</script>

<style scoped>
.checkup-report-container {
  padding: 10px;
}

.add-report-btn {
  margin-bottom: 15px;
  text-align: right;
}
</style>